import { ref } from "vue";
import { IUserItem, userModule } from "../modules/user";

export const useUserList = () => {
  let time = 0;
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
    },
    {
      title: 'name',
      dataIndex: 'name',
    },
    {
      title: 'operation',
      dataIndex: 'operation',
      slots: { customRender: 'operation' },
    },
  ]
  const pending = ref(userModule.state.userList.length === 0);
  const data = userModule.state.userList;
  const loadData = async () => { 
    pending.value = true;
    let success = await userModule.getUser(time);
    pending.value = false;
    ++time;
  }
  const deleteUser = (index: number) => {
    userModule.state.userList.splice(index, 1)
  }
  const addUser = (name: string = 'temp', id: number = 2) => {
    userModule.state.userList.push({
      name: name+time,
      id: id+time,
      key: 'key'+ time
    });
    ++time;
  }
  return {
    columns,
    pending,
    data,
    /**
     * load user Data. 
     */
    loadData,
    /**
     * delete a user by index
     * @param index delete the index of UserList
     */
    deleteUser,
    /**
     * Add a user
     * @param name user name
     * @param id user id
     */
    addUser,
  }
}